<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>注册 · Elegance</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      --primary: #6366f1;
      --error: #ef4444;
      --bg: #f5f5f7;
      --card: #ffffff;
      --radius: 14px;
      --trans: .25s ease;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
    }
    .card {
      width: 100%;
      max-width: 360px;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: 0 20px 40px rgba(0,0,0,.06);
      padding: 48px 36px;
      animation: fade .6s ease;
    }
    @keyframes fade {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    h1 {
      font-size: 26px;
      font-weight: 600;
      margin-bottom: 36px;
      text-align: center;
      letter-spacing: .5px;
    }
    .field {
      position: relative;
      margin-bottom: 28px;
    }
    input {
      width: 100%;
      padding: 14px 4px;
      border: none;
      border-bottom: 1px solid #ccc;
      font-size: 16px;
      outline: none;
      transition: border-color var(--trans);
      background: transparent;
    }
    input:focus { border-color: var(--primary); }
    label {
      position: absolute;
      left: 4px;
      top: 15px;
      font-size: 16px;
      color: #999;
      pointer-events: none;
      transition: all var(--trans);
    }
    input:focus + label, input:not(:placeholder-shown) + label {
      top: -12px;
      font-size: 12px;
      color: var(--primary);
    }
    .error {
      color: var(--error);
      font-size: 12px;
      margin-top: 6px;
      display: none;
    }
    button {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: var(--radius);
      background: var(--primary);
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: background var(--trans);
    }
    button:hover { background: #4f46e5; }
    .foot {
      text-align: center;
      margin-top: 24px;
      font-size: 14px;
      color: #666;
    }
    .foot a { color: var(--primary); text-decoration: none; }
  </style>
</head>
<body>
  <form class="card" id="regForm" novalidate>
    <h1>创建账户</h1>

    <div class="field">
      <input id="user" name="user" type="text" placeholder=" " required minlength="3" maxlength="16" pattern="[A-Za-z0-9_\u4e00-\u9fa5]+">
      <label for="user">用户名</label>
      <div class="error">3-16 位字母/数字/下划线/中文</div>
    </div>

    <div class="field">
      <input id="pwd" name="pwd" type="password" placeholder=" " required minlength="6">
      <label for="pwd">密码</label>
      <div class="error">至少 6 位</div>
    </div>

    <button type="submit">注册</button>

    <div class="foot">
      已有账户？<a href="/login.html">立即登录</a>
    </div>
  </form>

  <script>
    const form = document.getElementById('regForm');
    const user = document.getElementById('user');
    const pwd = document.getElementById('pwd');

    function toggleError(el, show) {
      el.parentElement.querySelector('.error').style.display = show ? 'block' : 'none';
    }
    user.addEventListener('input', () => toggleError(user, !user.validity.valid));
    pwd.addEventListener('input', () => toggleError(pwd, pwd.value.length < 6));

    form.addEventListener('submit', e => {
      e.preventDefault();
      let ok = true;
      if (!user.validity.valid) { toggleError(user, true); ok = false; }
      if (pwd.value.length < 6) { toggleError(pwd, true); ok = false; }
      if (!ok) return;

      const body = new URLSearchParams({ user: user.value, pwd: pwd.value });
      fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: body.toString()
      })
        .then(r => r.json())
        .then(res => {
          if (res.code === 0) location.href = '/welcome.html';
          else alert(res.msg || '注册失败');
        })
        .catch(() => alert('网络错误'));
    });
  </script>
</body>
</html>